<template>
    <section class="animate__animated animate__bounceInDown animate__slow">
        <div class="agent_list">
            <li class="title">
                <div class="left_part">
                    <h4>派单员列表</h4>
                </div>
                <div class="right_part">
                    <n-icon :size="18">
                        <Bookmarks />
                    </n-icon>
                </div>
            </li>
            <li v-if="loading" v-for="_ in 2">
                <div class="left_part">
                    <n-skeleton height="35px" width="35px" circle />
                    <n-skeleton :width="80" :height="20" :sharp="false" size="medium" />
                </div>
                <div class="right_part">
                    <n-skeleton :width="80" :height="20" :sharp="false" size="medium" />
                </div>
            </li>
            <li v-else v-for="item in agents" :key="item.id">
                <div class="left_part">
                    <img v-if="item.avatar" :src="item.avatar" />
                    <img v-else src="../../assets/images/avatar.png" />
                    <p>{{ item.name }}</p>
                </div>
                <div class="right_part">
                    <p>{{ item.qq }}</p>
                </div>
            </li>
        </div>
    </section>
</template>

<script setup lang='ts' name="HomeMainSectionLeft">
import { Bookmarks } from '@vicons/ionicons5';
import { getAgents } from '@/api/backend/admin';

const loading = ref(true);
const agents = reactive<AgentVO[]>([])
const initData = async () => {
    try {
        loading.value = true;
        const { data, code, message } = await getAgents();
        if (code !== 200) throw new Error(message);
        agents.length = 0;
        (data ?? []).forEach((item) => {
            agents.push(item)
        })
    } catch (error) {
        console.log(error);
    } finally {
        loading.value = false;
    }
}
initData();
</script>
<style scoped lang='scss'>
section {
    grid-area: left;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.27);
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;

    @include useTheme {
        background: getVar('rawBg');
    }

    .agent_list {
        cursor: pointer;

        li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1em;

            .left_part {
                display: flex;
                align-items: center;
                gap: 0.5em;
                height: 100%;

                img {
                    width: 35px;
                    height: 35px;
                    border-radius: 50%;
                }

                p {
                    line-height: 0;
                    font-weight: 600;
                    font-size: 0.8rem;
                }

                h4 {
                    font-size: 18px;
                    margin:0;
                }
            }

            .right_part {
                display: flex;
                align-items: center;
                gap: 0.5em;
                height: 100%;

                p {
                    line-height: 0;
                    font-size: 0.8rem;
                }
            }

            &:not(.title):hover {
                background: #d4e2fd80;
            }
            &.title{
                border-bottom:1px solid #cccccc90;
                position: sticky;
                top:0;
                @include useTheme{
                    background: getVar('rawBg');
                }
            }
        }
    }
}
</style>